<template>
  <div class="user-header">
    <el-button type="primary" @click="handleAdd">+新增</el-button>
    <el-form :inline="true" :model="formInline">
      <el-form-item label="请输入">
        <el-input v-model="formInline.keyword" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSerch">搜索</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-table :data="tableData" height="550">
      <el-table-column
        v-for="item in tableLabel"
        :key="item.prop"
        :label="item.label"
        :prop="item.prop"
        :width="item.width ? item.width : 125"
      />
      <el-table-column fixed="right" label="操作" min-width="180">
        <template #="scope">
          <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
      
    <el-pagination
      size="small"
      style="margin-top: 10px;"
      background
      layout="prev, pager, next"
      :total="config.total"
      @current-change="changePage" 
      class="pager"
    />
  </div>
</template>
<script setup >
  import {ref,reactive,getCurrentInstance,onMounted} from "vue";
  const {proxy} = getCurrentInstance()
  const formInline = reactive({
    keyword: "",
  })

  onMounted(()=>{
    getTableData()
  })
  const handleAdd = () => {
  }

  const handleSerch = () => {
  }

  const tableLabel = reactive([
    {
      prop: "name",
      label: "姓名",
    },
    {
      prop: "age",
      label: "年龄",
    },
    {
      prop: "sexLabel",
      label: "性别",
    },
    {
      prop: "birth",
      label: "出生日期",
      width: 200,
    },
    {
      prop: "addr",
      label: "地址",
      width: 400,
    },
  ])
  const config = reactive({
    total: 0,
    page: 1,
    name: "",
  })

  const tableData = ref([])
  const getTableData = async()=>{
    const data = await proxy.$api.getUrlData('api/getUserData')
    console.log(data,'data')
    tableData.value = data.list.map((item)=>{
      return {
        ...item,
        sexLabel:item.sex == 1?'男':'女'
      }
    })
  }
  const handleDelete =  (val) => {
  }
  const handleEdit =  (val) => {
  }
  const changePage =  (page) => {
  }
</script>
 
<style scoped lang="less">
  .user-header {
    display: flex;
    justify-content: space-between;
  }

  .table {
    position: relative;
    height: 520px;
    .pager {
      position: absolute;
      right: 10px;
      bottom: 30px;
    }
    .el-table {
      width: 100%;
      height: 500px;
    }
  }
  .select-clearn{
    display:flex;
  }
</style>